<template>
    <li :class="{ completed: todo.done, editing: editing }" class="todo">
        <div class="view">
            <input
                :checked="todo.done"
                class="toggle"
                type="checkbox"
                @change="toggleTodo( todo)"
            >
            <label @dblclick="editing = true" v-text="todo.text" />
            <button class="destroy" @click="deleteTodo( todo )" />
        </div>
        <input
            v-show="editing"
            v-focus="editing"
            :value="todo.text"
            class="edit"
            @keyup.enter="doneEdit"
            @keyup.esc="cancelEdit"
            @blur="doneEdit"
        >
    </li>
</template>

<script>
export default {
    name: "Todo",
    directives: {
        focus(el, { value }, { context }) {
            if (value) {
                context.$nextTick(() => {
                    el.focus();
                });
            }
        }
    },
    props: {
        todo: {
            type: Object,
            default: function() {
                return {};
            }
        }
    },
    data() {
        return {
            editing: false
        };
    },
    methods: {
        deleteTodo(todo) {
            this.$emit("deleteTodo", todo);
        },
        editTodo({ todo, value }) {
            this.$emit("editTodo", { todo, value });
        },
        toggleTodo(todo) {
            this.$emit("toggleTodo", todo);
        },
        doneEdit(e) {
            const value = e.target.value.trim();
            const { todo } = this;
            if (!value) {
                this.deleteTodo({
                    todo
                });
            } else if (this.editing) {
                this.editTodo({
                    todo,
                    value
                });
                this.editing = false;
            }
        },
        cancelEdit(e) {
            e.target.value = this.todo.text;
            this.editing = false;
        }
    }
};
</script>
